<template>
    <div class="container">
        <div class="top">
            <el-button class="add" size="small" type="primary" @click="addPermission" icon="el-icon-circle-plus">商品设置货架
            </el-button>
        </div>
        <el-table max-height="600" :data="tableData" border style="width: 100%" empty-text="暂无数据">
            <el-table-column prop="goods_code" label="商品编码" align="center"></el-table-column>
            <el-table-column prop="house_name" label="仓库名称" align="center"></el-table-column>
            <el-table-column prop="house_code" label="仓库编码" align="center"></el-table-column>
            <el-table-column prop="area_name" label="区域名称" align="center"></el-table-column>
            <el-table-column prop="shelves_name" label="货架名称" align="center"></el-table-column>
            <el-table-column prop="shelves_number" label="货架层数" align="center"></el-table-column>
            <el-table-column prop="goods_shelves_code" label="商品设置货架编码" align="center"></el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination>

        <goodsShelvesDialog :dialog="dialog" :regions="regions" @upData="getData"></goodsShelvesDialog>
    </div>
</template>
<script>
    import Pagination from "@/components/pagination";
    import { getToken } from "@/utils/auth";
    import { bindGoodsShelvesList, relieveBindGoodsShelves } from "@/api/warehouse/warehouse";
    import GoodsShelvesDialog from "@/components/warehouse/goodsShelvesDialog";
    import { parseTime } from "@/utils/index";
    export default {
        components: {
            pagination: Pagination,
            goodsShelvesDialog: GoodsShelvesDialog,
        },
        data() {
            return {
                //页面数据
                tableData: [],
                dialog: {
                    centerDialogVisible: false,
                },
                regions: {
                    id: "",
                },
                //分页
                pageData: {
                    pageSizes: [10, 20],
                    pageSize: 10,
                    page: 1,
                    total: null,
                    layout: "total, sizes, prev, pager, next, jumper",
                },
            };
        },
        watch: {
            $route() {
                //页面数据
                this.getData();
            }
        },

        created() {
            //页面数据
            this.getData();
        },
        //监听当前页面返回事件
        beforeRouteLeave(to, from, next) {
            if (to.name == 'superCommodityList') {
                from.meta.keepAlive = false;
            } else {
                from.meta.keepAlive = false;
                to.meta.keepAlive = false;
                this.$destroy()
            }
            next();
        },
        methods: {
            //页面数据
            getData() {
                let data = {
                    limit: this.pageData.pageSize,
                    page: this.pageData.page,
                    goods_code: this.$route.query.code,
                };
                bindGoodsShelvesList(data)
                    .then((res) => {
                        if (res.code == 0) {
                            res.data.paginate.data.forEach(item => {
                                item.created_at = parseTime(item.created_at);
                            });
                            this.tableData = res.data.paginate.data;
                            this.pageData.page = res.data.paginate.current_page;
                            this.pageData.pagesize = res.data.paginate.per_page;
                            this.pageData.total = res.data.paginate.total;
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            //添加人员
            addPermission() {
                this.dialog.centerDialogVisible = true;
                this.regions.id = this.$route.query.code;
            },
            //删除
            handleDelete(scope) {
                this.$confirm("是否删除该条信息?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let data = {
                            id: scope.row.id,
                        };
                        relieveBindGoodsShelves(data)
                            .then((res) => {
                                if (res.code == 0) {
                                    this.getData();
                                    this.$message({
                                        type: "success",
                                        message: res.msg,
                                    });
                                }
                            })
                            .catch(err => {
                                console.log(err, 99999)
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            //每页多少条
            handleCurrentChange(val) {
                this.pageData.page = 1;
                this.pageData.pageSize = val;
                this.getData();
            },
            //选取页数
            handleSizeChange(page) {
                this.pageData.page = page;
                this.getData();
            },
            //选取
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
    };
</script>
<style scoped>
    .top {
        position: relative;
        height: 60px;
        margin-bottom: 5px;
    }

    .btnList {
        position: relative;
        margin-bottom: 5px;
    }

    .add {
        position: absolute;
        right: 0;
        top: 4px;
    }

    .pagination {
        text-align: right;
        padding: 10px;
    }
</style>